Event.observe ( window, 'load', bootstrap );

function bootstrap () {
  $( 'product' ).observe ( 'change', product_changed );
}

function product_changed () {
  var product = $( 'product' ).value;
  
  if ( product != '' ) {
    var html = '<div id="devices"><p class="error">No devices!</p></div>';

    new Ajax.Request ( '/rest/product/' + product + '/devices', {
      method         : 'get',
      requestHeaders : { Accept : 'application/json' },
      onException      : function () {
        $( 'devices' ).replace ( html );
      },
      onFailure      : function () {
        $( 'devices' ).replace ( html );
      },
      onComplete     : function ( transport ) {
        var devices = transport.responseJSON;

        if ( devices.size () ) {
          html =
            "<table id=\"devices\" class=\"devices sortable\">\n"
          + "  <thead>\n"
          + "    <tr>\n"
          + "      <th class=\"noedit\" id=\"id\"         >ID</th>\n"
          + "      <th class=\"noedit\" id=\"description\">Description</th>\n"
          + "    </tr>\n"
          + "  </thead>\n"
          ;
          
          var i = 1;
          
          devices.each ( function ( h ) {
            html = html
            + "    <tr class=\"" + ( i % 2 ? "odd" : "even" ) + "\">\n"
            + "      <td>" + ( h.url ? "<a href=\"" + h.url + "\">" : "" ) + h.id                   + ( h.url ? "</a>" : "" ) + "</td>\n"
            + "      <td>" +                                               ( h.description || "-" )                           + "</td>\n"
            + "    </tr>\n"
            ;

            i = i + 1;
          } );

          html = html
          + "  </tbody>\n"
          + "</table>\n"
          ;
        }
        
        $( 'devices' ).replace ( html );
      }
    } );
  }
  else {
    $( 'devices' ).replace ( html );
  }
}
